<template>
  <el-dropdown :hide-on-click="false"
   v-model:="LoginStatusVisible">
    <span class="el-dropdown-link">{{username}}
      <el-icon class="el-icon--right"><arrow-down /></el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu class="dropdown">
        <el-dropdown-item><a href="/user" style="text-decoration: none" class="personal">personal information</a></el-dropdown-item>
        <el-dropdown-item>Account balance</el-dropdown-item>
        <el-dropdown-item></el-dropdown-item>
        <el-dropdown-item divided>shopping trolley</el-dropdown-item>
        <el-dropdown-item divided @click="loginOut">Exit</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>


<script>
import axios from 'axios'
import {ref,reactive,toRefs, onMounted} from 'vue'
import {useModelWrapper} from './use-model-wrapper.js'
import {useUserStore} from '../status/pinia/user'
import router from "@/router/index.js";
  export default{
    name: "LoginStatus",
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      editData: {
        type: Object,
      }, 
    },

    setup(props, {emit}){
      const userStore = useUserStore()
      const LoginStatusVisible = useModelWrapper(props, emit, 'visible')
      const {editData,visible} = toRefs(props)
      const data = reactive({
        username: ref(null)
      })

      const getUserInfo = () => {
        const local = JSON.parse(localStorage.getItem('loginData'))
        data.username = local.username
      }

      const check_login = () =>{
        if (!userStore.userinfo){
          emit('loginOut_button')
          return
        }
        emit('login_button')
        return
      }


      const loginOut = () => {
        // 删除本地缓存
        localStorage.removeItem('loginData')
        userStore.userinfo = {}
        router.push({
          path: '/login'
        })
        check_login()
      }

      onMounted(() => {
        check_login()
        getUserInfo()
      })


      return{
        ...toRefs(data),
        LoginStatusVisible,
        editData,
        visible,
        check_login,
        userStore,
        loginOut,
        getUserInfo
      }
    }
  }
</script>



<style scoped>


.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.example-showcase .el-dropdown-link {
  margin-left: 100px;
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.el-icon--right:hover {
  cursor:pointer // 鼠标变成小手
}

.personal {
  color: #575758;;
}

.dropdown {
  text-align: center;
}



</style>